<?php $this->load->view('header');?>
<body class="childrenBody" style="background-color: #f2f4f8">

<div class="m_top">
	<div class="_headimg">
		<?php if ($headimg):?>
		<img src="<?=$headimg?>" alt="">
		<?php else:?>
		<img src="images/default_head.png" alt="">
		<?php endif;?>
	</div>
	<div class="_user">
		<h4><?=$nickname?>
			<?php if ($sex == 1):?>
			<i class="layui-icon" style="color: #0cc3aa">&#xe662;</i>
			<?php else:?>
			<i class="layui-icon" style="color: #ff3ec9">&#xe661;</i>
			<?php endif;?>
		</h4>
		<p class="_tel">电话：<?=$mobile?></p>
		<p class="_date">创建时间：<?=$addtime?></p>
	</div>
	<div class="act_box" style="margin-top: 40px;float: right;margin-right: 42px;">
		<button class="layui-btn" id="add_card">添加课程卡</button>
	</div>
</div>

<div style="margin: 20px 30px;">
	<div class="layui-tab layui-tab-brief" lay-filter="TabBrief">
	  <ul class="layui-tab-title">
	    <li class="layui-this">会员分析</li>
	    <li>消费记录</li>
	    <li>会员资料</li>
	  </ul>
	  <div class="layui-tab-content">
	  	<!-- 会员分析 -->
	    <div class="layui-tab-item layui-show">
    		<div style="overflow: hidden;">
	    		<div class="_tab">
					<div class="_overview_msg">
						<h5>消费总金额</h5>
						<p class="_count"><small>¥ </small><?=$total_num?></p>
						<p class="tips">本月消费&emsp;¥<?=$month_total?></p>
					</div>
	    		</div>

	    		<div class="_tab2">
					<div class="_overview_msg">
						<h5>本月上课数</h5>
						<p class="_count"><?=$course_num?></p>
						<p class="tips">有效课程次数&emsp;<?=$balance?></p>
					</div>
	    		</div>
	    		<div class="_tab3">
					<div class="_overview_msg">
						<h5>已购课程卡</h5>
						<p class="_count"><?=$card_num?></p>
						<p class="tips">永久有效</p>
					</div>
	    		</div>
    		</div>
			<div style="overflow: hidden;">
				<div class="_card" style="height: 340px;overflow: auto;">
					<div class="_data_title">
						<b>课程卡情况</b>
					</div>
					<div>
						<table class="layui-table" lay-even="" lay-skin="line" style="margin-top: 0;">
						    <thead>
								<tr>
									<th>课程卡</th>
									<th>总数/剩余次数</th>
									<th>状态</th>
									<!-- <th>操作</th> -->
								</tr>
						    </thead>
							<tbody class="goods_content" id="courses0"></tbody>
						</table>
					</div>
				</div>
				<div class="_new">
					<div class="_data_title">
						<b>最新消费</b>
					</div>
					<div>
						<ul id="consu0"></ul>
					</div>
				</div>
			</div>
			<div class="_yuyue">
				<div class="_data_title">
					<b>预约情况</b>
				</div>
					<div class="layui-btn-group" style="margin: 10px 0px 10px 20px;">
						<button class="layui-btn layui-btn-primary layui-btn-small ThirtyBtn clickbtclass">近30天</button>
						<button class="layui-btn layui-btn-primary layui-btn-small Sixty">近60天</button>
						<button class="layui-btn layui-btn-primary layui-btn-small Ninety">近90天</button>
					</div>
					<div class="layui-inline">
					  <div class="layui-input-inline">
					    <input type="text" class="layui-input" id="test" placeholder="选择时间段" style="height: 32px;">
					  </div>
					</div>
				<div id="container"></div>
			</div>
	    </div>

	    <!-- 消费记录 -->
	    <div class="layui-tab-item">
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>课程卡情况</b>
				</div>
				
				<table class="layui-table" lay-skin="line" style="margin-top: 0;">
				    <thead>
						<tr>
							<th>课程卡</th>
							<th>总数/剩余次数</th>
							<th>状态</th>
						</tr>
				    </thead>
					<tbody class="goods_content" id="courses1"></tbody>
				</table>
	    	</div>
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>预约记录</b>
				</div>
				<table class="layui-table" lay-even="" lay-skin="line" style="margin-top: 0;">
				    <thead>
						<tr>
							<th>上课时间</th>
							<th>课程名称</th>
							<th>类型</th>
							<th>教练</th>
							<th>人数</th>
							<th>状态</th>
							<th>预约时间</th>
						</tr>
				    </thead>
					<tbody class="goods_content" id="applog"></tbody>
				</table>
	    	</div>
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>消费记录</b>
				</div>
				<table class="layui-table" lay-even="" lay-skin="row" style="margin-top: 0;">
				    <thead>
						<tr>
							<th>课程卡</th>
							<th>金额</th>
							<th>消费说明</th>
							<th>时间</th>
						</tr>
				    </thead>
					<tbody class="goods_content" id="consu1">

					</tbody>
				</table>
	    	</div>
	    </div>

	    <!-- 会员资料 -->
	    <div class="layui-tab-item">
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>详细信息</b>
				</div>
				<div class="muser_info">
					<ul>
						<li>
							<p><i class="mdata_title">头像：</i>
								<?php if ($headimg):?>
								<img src="<?=$headimg?>" alt="" style="width: 30px;height:30px;border-radius: 100%;">
								<?php else:?>
								<img src="images/default_head.png" alt="" style="width: 30px;height:30px;border-radius: 100%;">
								<?php endif;?>
							</p>
						</li>
						<li><p><i class="mdata_title">姓名：</i><?php if ($nickname):?><?=$nickname?><?php else:?>未设置<?php endif;?></p></li>
						<li><p><i class="mdata_title">手机：</i><?php if ($mobile):?><?=$mobile?><?php else:?>未设置<?php endif;?></p></li>
						<li><p><i class="mdata_title">性别：</i><?php if ($sex == 1):?>男<?php else:?>女<?php endif;?></p></li>
						<!--li><p><i class="mdata_title">地址：</i><?php if ($city):?><?=$country?>,<?=$province?>,<?=$city?><?php else:?>未设置<?php endif;?></p></li-->
						<li><p><i class="mdata_title">生日：</i><?php if ($birthday):?><?=$birthday?><?php else:?>未设置<?php endif;?></p></li>
						<!--li><p><i class="mdata_title">身份证号码：</i><?php if ($id_card_no):?><?=$id_card_no?><?php else:?>未设置<?php endif;?></p></li-->
						<!--li><p><i class="mdata_title">身高：</i><?php if ($height):?><?=$height?><?php else:?>未设置<?php endif;?></p></li-->
						<!--li><p><i class="mdata_title">体重：</i><?php if ($weight):?><?=$weight?><?php else:?>未设置<?php endif;?></p></li-->
					</ul>
				</div>
	    	</div>
	    	<div class="mdata_tab">
	    		<div class="_data_title">
					<b>训练计划</b>
				</div>
				<table class="layui-table" lay-even="" lay-skin="line" style="margin-top: 0;">
				    <thead>
						<tr>
							<th>计划名称</th>
							<th>制定教练</th>
                            <th>操作</th>
						</tr>
				    </thead>
					<tbody class="goods_content" id="plan"></tbody>
				</table>
	    	</div>
	    </div>
	  </div>
	</div>
</div>

<style>
    .opera a{color: #58595b;cursor:pointer;}
    .opera a:hover{color: #0f8df2}
</style>

<!-- 模板 -->
<script id="cour" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.name }}</td>
		  <td>{{ item.total_num }}次/{{ item.num }}次</td>
		  <td>{{ item.status }}</td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
		<tr>
		  <td colspan="3">
			<div style="padding: 30px;text-align: center;">暂无数据</div>
		  </td>
		</tr>
		
    {{#  } }}
</script>

<script id="demo2" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<li>
			<span class="_t-label red">购卡</span>
			<div class="_detail">
				<p class="_title">{{ item.name }}</p>
				<p class="_remark">次卡 {{ item.num }}次</p>
			</div>
			<div class="_desc">
				<p class="_time">{{ item.addtime }}</p>
				<p class="_t-color">+ {{ item.price }}</p>
			</div>
        </li>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      <div style="padding: 30px;text-align: center;">暂无数据</div>
    {{#  } }}
</script>

<script id="demo3" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.name }}</td>
		  <td>+ {{ item.price }}</td>
		  <td>{{ item.info }}</td>
		  <td>{{ item.add_time }}</td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      <tr>
		  <td colspan="4">
			<div style="padding: 30px;text-align: center;">暂无数据</div>
		  </td>
		</tr>
    {{#  } }}
</script>

<script id="demo4" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.sdate }}<br>{{ item.stime }}</td>
		  <td>{{ item.name }}</td>
		  <td>{{ item.type }}</td>
		  <td>{{ item.nickname }}</td>
		  <td>{{ item.num }}</td>
		  <td>{{ item.status }}</td>
		  <td>{{ item.addtime }}</td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      <tr>
		  <td colspan="7">
			<div style="padding: 30px;text-align: center;">暂无数据</div>
		  </td>
		</tr>
    {{#  } }}
</script>

<script id="demo5" type="text/html">
    {{#  layui.each(d.list, function(index, item){ }}
		<tr>
		  <td>{{ item.name }}</td>
		  <td>{{ item.nickname }}</td>
          <td class="opera"><a href="javasrcipt:;" onclick="plan_info({{item.id}});">查看详细计划</a></td>
		</tr>
    {{#  }); }}

    {{#  if(d.list.length === 0){ }}
      <tr>
		  <td colspan="3">
			<div style="padding: 30px;text-align: center;">暂无数据</div>
		  </td>
		</tr>
    {{#  } }}
</script>


<script id="add_cart_html" type="text/html">
<form class="layui-form" id="add_card_form" style="padding:20px 0;">
	<div class="layui-form-item">
		<label class="layui-form-label">课程卡</label>
		<div class="layui-input-inline" style="width:220px;">
			<select name="card_id">
				{{#  layui.each(d.card_list, function(index, item){ }}
				<option value="{{item.id}}" >{{ item.card_name }}(数量{{ item.course_num }}次)</option>
				{{#  }); }}
			</select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">剩余次数</label>
		<div class="layui-input-inline" style="width:220px;">
			<input type="text" name="num" value="0" class="layui-input">
		</div>
	</div>
</form>


</script>


<script>
layui.config({
	version: true
}).use(['element','jquery','layer', 'laytpl', 'form', 'laydate'], function(){
  var layer = parent.layer === undefined ? layui.layer : parent.layer,
		element = layui.element,
		laytpl = layui.laytpl,
		laydate = layui.laydate,
		form = layui.form,
		$ = layui.jquery;

		var uid = <?=$user_id?>;
		var date=new Date();
		var maxDate = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate()-1); //获取当前年份

		load_course_data('0',uid);		//获取课程情况
		load_consu_log_data('0',uid);	//消费记录
		load_data_list(uid,30);

		element.on('tab(TabBrief)', function(data)
		{
			if (data.index == 1) {
			  load_course_data(data.index,uid);
			  load_consu_log_data(data.index,uid);
			  load_appoint_data(data.index,uid);
			}

			if (data.index == 2) {
				load_plan_data(uid);
			}

		});

		//近30天
		$('.ThirtyBtn').click(function(event)
		{
			load_data_list(uid,'30');
			$(".ThirtyBtn").addClass("clickbtclass");
			$(".Sixty").removeClass('clickbtclass');
			$(".Ninety").removeClass('clickbtclass');
		});

		//近60天
		$('.Sixty').click(function(event)
		{
			load_data_list(uid,'60');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Sixty").addClass('clickbtclass');
			$(".Ninety").removeClass('clickbtclass');
		});

		//近90天
		$('.Ninety').click(function(event)
		{
			load_data_list(uid,'90');
			$(".ThirtyBtn").removeClass("clickbtclass");
			$(".Sixty").removeClass('clickbtclass');
			$(".Ninety").addClass('clickbtclass');
		});


		//日期范围
		laydate.render({
			elem: '#test'
			,range: true
			,max: maxDate
			,btns: ['confirm']
		    ,done: function(value, date, endDate)
		    {
		    	load_data_list(uid,value);
				$(".ThirtyBtn").removeClass("clickbtclass");
				$(".FifteenBtn").removeClass('clickbtclass');
				$(".SevenBtn").removeClass('clickbtclass');
		    }
		});


		function load_data_list(uid,dtnum)
		{
			$.get('admin.php/UserMember/get_appoint',{user_id:uid,date_num:dtnum}, function(data)
			{
				if (data.status == 200)
				{
					var d = data.appoint_num;
					var m = [];
					for (var i = 0; i < d.length; i++) {
						m.push(parseInt(d[i]));
					}

					var chart = Highcharts.chart('container', {
			                title: {
			                    text:null,
			                },
			                chart: {
								type:'spline'
							},
			                xAxis:{
			                	gridLineWidth: 1,
			                	categories: data.date_list
			                },
			                yAxis: {
			                   title:'',
			                   allowDecimals:false
			                },
			                legend: {
			                    enabled: false
			                },
			                credits: {
			                    enabled: false
			                },
			                exporting: {
			                    enabled: false
			                },
			                series: [{
			                        name: '数量',
			                        data: m
			                }],
			                colors: ['#0cc3aa','#0f8df2'],
			        });

				}

			},'json');

		}


		//获取课程卡信息
		function load_course_data(_index,uid)
		{
			$.get('admin.php/UserMember/get_course/'+uid, function(data)
			{
				var getTpl = cour.innerHTML;
				laytpl(getTpl).render(data, function(html){
				  $('#courses'+_index).html(html);
				});

			},'json');

		}


		//获取消费记录
		function load_consu_log_data(_index,uid)
		{
			$.get('admin.php/UserMember/get_consu_log/'+uid, function(data)
			{
				if (_index == 1) {
					var getTpl = demo3.innerHTML;
				}else{
					var getTpl = demo2.innerHTML;
				}

				laytpl(getTpl).render(data, function(html){
				  $('#consu'+_index).html(html);
				});

			},'json');
		}

		//获取预约记录
		function load_appoint_data(_index,uid)
		{
			$.get('admin.php/UserMember/get_bespeak/'+uid, function(data)
			{
				var getTpl = demo4.innerHTML;
				laytpl(getTpl).render(data, function(html){
				  $('#applog').html(html);
				});

			},'json');
		}


		//获取训练计划
		function load_plan_data(uid)
		{
			$.get('admin.php/UserMember/get_plan/'+uid, function(data)
			{
				var getTpl = demo5.innerHTML;
				laytpl(getTpl).render(data, function(html){
				  $('#plan').html(html);
				});

			},'json');

		}
		
		
		var card_list = [];
		
		(function(){
			$.get('admin.php/CourseCard/get_list', function(data){
				if(data.result_code==0){
					card_list = data.data;
				}

			},'json');
			
		})();
		
		
		
		$('#add_card').click(function(){
			
			
			var data = {
				card_list:card_list
			};
			
			
			var getTpl = document.getElementById('add_cart_html').innerHTML;
			laytpl(getTpl).render(data, function(html){
				
				var index = layui.layer.open({
					title : "会员信息",
					type : 1,
					btn: ['确 定'],
					area: ['520px', '360px'],
					offset: '70px',
					content : html,
					yes: function(index, layero){
						add_card_form();
					} 
				});
				form.render('select');
				
			});
			
		});

});

function add_card_form(){
	
	var data = $('#add_card_form').serializeArray();
	var postdata = {};
	for(var i=0;i<data.length;i++){
		postdata[data[i].name] = data[i].value;
	}
	postdata['uid'] = '<?php echo $user_id;?>';
	
	$.post('admin.php/UserMember/add_card',postdata, function(result){
		
		if(result.result_code==0){
			alert('添加成功');
			location.reload();
		}
		else{
			alert(result.message);
		}

	},'json');
	
}


//查看详细计划
function plan_info(val) {
    var index = layui.layer.open({
        title : "训练计划详细",
        type : 2,
        content : "admin.php/UserMember/plan_info/"+val,

    })

    //改变窗口大小时，重置弹窗的高度，防止超出可视区域
    $(window).resize(function(){
        layui.layer.full(index);
    })
    layui.layer.full(index);
}

</script>



</body>
</html>